/* search */
<template xlang="wxml">
  <View >
    <van-row>
      <van-col :span="6">
        <van-dropdown-menu>
          <van-dropdown-item :value="form.name" :options="nameOptions"/>
        </van-dropdown-menu>
      </van-col>
      <van-col :span="6">
        <van-dropdown-menu>
          <van-dropdown-item :value="form.status" :options="statusOptions"/>
        </van-dropdown-menu>
      </van-col>
      <van-col :span="6">
        <van-dropdown-menu>
          <van-dropdown-item :value="form.type" :options="typeOptions"/>
        </van-dropdown-menu>
      </van-col>
     <!--  <van-col :span="6">
        <van-cell title="选择日期" :value="form.time" @click="onDisplay"/>
        <van-calendar :show="show" type="range" @close="onClose" @confirm="onConfirm"/>
      </van-col> -->
    </van-row>
  </View>
</template>

<script>
export default {
  data: () => ({
    show: false,
    form: {
      name: 0,
      status: 0,
      type: 0,
      time: ""
    },
    nameOptions: [
      { text: "项目一", value: 0 },
      { text: "项目二", value: 1 },
      { text: "项目三", value: 2 }
    ],
    statusOptions: [
      { text: "未关闭", value: 0 },
      { text: "未开始", value: 1 },
      { text: "已结束", value: 2 }
    ],
    typeOptions: [
      { text: "安全帽", value: 0 },
      { text: "工服", value: 1 },
      { text: "安全带", value: 2 }
    ]
  }),
  methods: {
    onDisplay() {
      this.show = true;
    },
    onClose() {
      this.show = false;
    },
    formatDate(date) {
      date = new Date(date);
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(event) {
      const start = event.target[0];
      const end = event.target[1];
      console.log(start, end, event.target);
      this.show = false;
      this.form.time = `${this.formatDate(start)} - ${this.formatDate(end)}`;
    }
  }
};
</script>

<style lang="less" scoped>
</style>